<template>
    <div class="div-height-left">
        <!--        <el-card ref="card" :style="style" class="box-card">-->
        <el-card ref="card" class="box-card">
            <div class="tree-div" style="height: 35px">
                <el-checkbox v-model="deptExpand" style="margin-top: 7px;"
                             @change="handleCheckedTreeExpand($event, 'tree')">
                    展开/折叠
                </el-checkbox>
                <el-checkbox v-if="showCheckbox" v-model="deptNodeAll" style="margin-top: 7px;"
                             @change="handleCheckedTreeNodeAll($event, 'tree')">
                    全选/全不选
                </el-checkbox>
            </div>
            <div class="group-menu-tree" style="height: calc(100% - 35px)">
                <el-empty v-if="!orgId" description="暂无科室数据，请先选择所属机构"></el-empty>
                <template v-else>
                    <el-input
                        v-model="filterText"
                        placeholder="输入关键字进行过滤">
                    </el-input>

                    <el-tree
                        ref="tree"
                        :data="data"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        :highlight-current=true
                        :props="defaultProps"
                        :show-checkbox="showCheckbox"
                        class="filter-tree"
                        default-expand-all
                        node-key="id"
                        @node-click="nodeClick">
                    </el-tree>
                </template>
            </div>
        </el-card>
    </div>
</template>

<script>

import {listDeptTree} from '@/api/system/dept'
import store from "@/store";

export default {
    name: "DeptTree",
    data () {
        return {
            filterText: '',
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            thisExcessHeight: 0,
            style: {
                height: 'calc(100% - 150px)'
            },
            deptExpand: true,
            deptNodeAll: false,
            deptCount: 0
        }
    },
    props: {
        orgId: {
            type: String,
            default: store.state.user.userInfo.orgId
        },
        showCheckbox: {
            type: Boolean,
            default: false
        },
        defaultCheckedKeys: {
            type: [Array],
            default: () => []
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        },
        thisExcessHeight(newVal, oldVal) {
            this.style = {
                height: 'calc(100% - ' + newVal + 'px)'
            }
        },
        orgId(val) {
            this.getListDept(val)
        },
        defaultCheckedKeys(val) {
            this.judgmentAllSelection(val)
        },
        data (n, o) {
            this.$nextTick(() => {
                if (this.defaultCheckedKeys.length > 0) {
                    this.judgmentAllSelection(this.defaultCheckedKeys)
                }
            })
        }
    },
    mounted () {
        if (this.orgId) {
            this.getListDept(this.orgId)
        }
    },
    methods: {
        /** 判断是否全选 */
        judgmentAllSelection (defaultCheckedKeys) {
            if (!defaultCheckedKeys) {
                // el-tree设置、取消选中状态（高亮）
                return this.$refs.tree.setCurrentKey(null)
            }
            this.deptNodeAll = this.deptCount === defaultCheckedKeys.length;
            defaultCheckedKeys.map((i, n) => {
                //根据i获取tree中的节点
                let node = this.$refs.tree.getNode(i);
                if (node) {
                    //设置某个节点的勾选状态
                    this.$refs.tree.setChecked(node, true);
                }
            })
        },
        /** 查询科室列表 */
        getListDept (orgId) {
            listDeptTree({'delFlag': '0', 'status': '0', 'orgId': orgId}).then(res => {
                this.data = res.data.list
                this.deptCount = res.data.deptList
                this.$emit('listDeptTree', res.data.list)
            })
        },
        /** 搜索 */
        filterNode (value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        /** 树节点点击事件 */
        nodeClick (a, b, c) {
            this.$emit('treeClick', a)
        },
        /** 获取勾选节点 */
        getCheckedKeys () {
            return this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
        },
        // 树权限（展开/折叠）
        handleCheckedTreeExpand (value, type) {
            let treeList = this.data;
            for (let i = 0; i < treeList.length; i++) {
                this.$refs.tree.store.nodesMap[treeList[i].id].expanded = value;
            }
        },
        // 树权限（全选/全不选）
        handleCheckedTreeNodeAll (value) {
            this.$refs.tree.setCheckedNodes(value ? this.data : []);
        },
        /** 清空选中节点 */
        clearTheSelection () {
            this.$refs.tree.setCheckedKeys([]);
        },
    },
}
</script>

<style lang="scss" scoped>
.box-card {
    overflow-y: auto;
    height: calc(100% - 70px);
}

.aab {
    height: calc(100% - 150px);
}

::v-deep .el-card__body {
    height: 100%;
}
</style>
